<template>
  <el-affix :offset-top="0" :z-index="999">
    <el-col :span="24">
      <div style="background-color: rgb(64, 158, 255); height: 40px; display: flex; justify-content: left;
  align-items: center;">
        <el-icon :size="30" @click="$router.back()" style="color: white; margin: 8px;">
          <ArrowLeftBold />
        </el-icon>
      </div>
    </el-col>
  </el-affix>
  <div class="app-container">
    <el-aside width="30%" class="sidebar">
      <el-menu
          :default-active="activeCategory"
          class="category-menu"
          @select="handleCategorySelect"
      >
        <el-menu-item
            v-for="category in categories"
            :key="category"
            :index="category.value.toString()"
        >
          {{ category.label}}
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main class="app-list">
      <el-card
          v-for="app in filteredApps"
          :key="app.name"
          class="app-card"
          shadow="hover"
      >
        <div class="app-info">
          <router-link :to="{ name: 'AppView', params: {id:app.id}, query:{userId:userId}}" >
            <img :src="app.appurl" alt="app-icon" class="app-icon" />
          </router-link>
          <div class="app-details">
            <div class="app-name">{{ app.name}}</div>
            <div class="app-rating-downloads">
              {{ app.apprecommend }} | {{ app.applocation }}
            </div>
          </div>
        </div>
<!--        <router-link  :to="{ name: 'sign', params: {id:app.id} }" >
        <el-button type="primary" @click="handleInstall(app)">安装</el-button>
        </router-link>-->
      </el-card>
    </el-main>
  </div>
  <home-bottem-icons/>
</template>

<script setup lang="ts">
import HomeBottemIcons from '@/components/HomeBottemIcons.vue';
import {ref, computed, getCurrentInstance, useId,defineProps} from 'vue';

// 定义应用的类型
interface App {
  id: string;
  name: string;
  appdesc: string;
  applocation: string;
  apprecommend: string;
  appurl: string;
  apptype :Number;
}

const props = defineProps<{
  userId: string; // user的id
}>();
// 直接使用 props.userId
console.log('接收到的 userId:', props.userId)

// 定义分类列表
const categories = ref([
  { value: 1, label: '教育' },
  { value: 2, label: '游戏' },
  { value: 3, label: '出行导航' },
  { value: 4, label: '儿童' },
  { value: 5, label: '运动健康' },
  { value: 6, label: '便捷生活' },
]);

// 定义当前激活的分类
const activeCategory = ref('4');

// 定义应用列表
const appslist = ref<App[]>([]);

// 根据当前分类过滤应用列表
const filteredApps = computed(() => {
  if (!Array.isArray(appslist.value)) {
    return []; // 不是数组返回空数组，避免报错
  }
  if (activeCategory.value === '全部') {
    return appslist.value;
  }
  return appslist.value.filter(app => app.apptype === Number(activeCategory.value))
});

// 处理分类选择事件
const handleCategorySelect = (key: string) => {
  activeCategory.value = key === '全部' ? '全部' : Number(key);
};

// 处理安装事件
/*const handleInstall = (app: App) => {
  console.log(`安装 ${app.name}`);
};*/

/*
const getCategoryLabel = (apptype: number) => {
  const category = categories.value.find(c => c.value === apptype);
  return category ? category.label : '未知分类';
};
*/

// 获取当前实例
const instance = getCurrentInstance();
if (instance) {
  const global = instance.appContext.config.globalProperties;
  global.$http.get('/AppStore/appslist', {
    params: {
    }
  })
      .then(resp => {
        console.log(resp.data);
        appslist.value = resp.data;
      })
      .catch(err => {
        console.error(new Error(err));
      });
}
</script>

<style scoped>
.app-container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  background-color: #fff;
  border-right: 1px solid #f0f0f0;
}

.category-menu {
  border-right: none;
}

.app-list {
  background-color: #f5f7fa;
  padding: 20px;
}

.app-card {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.app-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.app-icon {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.app-details {
  display: flex;
  flex-direction: column;
}

.app-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.app-rating-downloads {
  color: #606266;
}

</style>